/*
 * @Description: 编辑登记弹窗
 * @Author: Rfan
 * @Date: 2022-11-19 16:31:39
 * @LastEditTime: 2022-12-08 16:39:54
 */

import { useEffect } from 'react';
import { Button, Form, Modal } from 'antd';
import { useMicroformContext } from '../../contexts/MicroformContext';
import MicroformForm from './common/MicroformForm';
import type { ICommonDialog } from '@/interfaces/global';
import type { IRegMicroformItem } from '@/interfaces/registration';

interface IEditMicroformDialogProps extends ICommonDialog {
  data: IRegMicroformItem;
}

const EditMicroformDialog = (props: IEditMicroformDialogProps) => {
  const { visible, data, onClose } = props;
  const { editRegMicroformFunc } = useMicroformContext();
  const [form] = Form.useForm();

  useEffect(() => {
    if (visible) {
      form.setFieldsValue(data);
    }
  }, [visible]);

  const onCancel = () => {
    onClose();
  };

  // 提交表单
  const submitFunc = () => {
    form.submit();
  };

  //  编辑微缩品质量检测条目
  const onFinish = (values: IEditMicroformDialogProps) => {
    const params: IEditMicroformDialogProps = { ...data, ...values };
    editRegMicroformFunc(params).then(() => {
      onClose();
    });
  };

  return (
    <Modal
      destroyOnClose
      title="编辑登记条目"
      visible={visible}
      width={600}
      onCancel={onCancel}
      footer={[
        <Button key="back" onClick={onCancel}>
          取消
        </Button>,
        <Button key="submit" type="primary" onClick={submitFunc}>
          保存
        </Button>
      ]}
    >
      <Form
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 14 }}
        preserve={false}
        form={form}
        onFinish={onFinish}
      >
        <MicroformForm visible={visible} />
      </Form>
    </Modal>
  );
};

export default EditMicroformDialog;
